<template>
  <section class="testDriver">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="true"
      :title="textMap[popupsState]"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closePopups"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />
      <div class="fixHeight">
        <template v-for="(comps,index) in coms">
          <div :key="index" class="filter-container filter-params">
            <h3 v-if="comps.title" :style="styleObj">{{ comps.title }}</h3>
            <el-row ref="vailComponentList1" :gutter="26">
              <component
                :is="comp.component"
                v-for="comp in comps.data.filter(o => o.isMust === true)"
                :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
                :key="comp.compKey"
                :validrule="comp.validrule"
                :code-field="comp.codeField"
                :text-field="comp.textField"
                :popups-key="comp.compKey"
                :code="formField[comp.codeField]"
                :disabled="comp.disabled"
                :is-require="comp.isRequire"
                :is-mul="comp.isMul"
                :span="comp.span || 24"
                :label-name="comp.labelName"
                :lookuptype="comp.lookuptype"
                :data-to-object="comp.dataToObj"
                :date-options-type="comp.dateOptionsType"
                @changeCode="getComponentCode"
                @focusCode="getFocusCode"
              />
            </el-row>
          </div>
        </template>
      </div>

      <el-divider />
      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          @click="comp.clickEvent"
        >{{ comp.text }}
        </el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'

export default {
  name: 'TDOrderCreationEdit',
  components: {
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  // 组件混入对象
  mixins: [formMixins],
  data() {
    return {

      // h3标题行内样式
      styleObj: { borderLeft: null },
      // 订单列表
      orderList: [],
      //
      genCodeFiled: null,
      // 保存API配置对象
      apiConfig: this.dynamicApiConfig,
      // 动态组件-按钮
      tableButtons: [],
      // 动态组件-查询条件
      tableComponents: [],
      coms: [
        {
          id: '001',
          title: '购车发票',
          data: [
            {
              compKey: 'compKey2',
              labelName: '发票号码：',
              codeField: 'erpBookInvoice',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey3',
              labelName: 'VIN码：',
              codeField: 'vin',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey4',
              labelName: '开票单位名称：',
              codeField: 'invoiceCustName',
              // textField: 'registerCityText',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey5',
              labelName: '附件：',
              codeField: 'filePath',
              textField: 'filePath',
              // component: () => import('./img/index'),
              component: () => import('@/components/upload/up.vue'),
              dataToObj: { isUpload: false },
              type: 'dropdownList',
              isMust: true,
              span: 8
            }
          ]
        },
        {
          id: '003',
          title: '合格证',
          data: [
            {
              compKey: 'compKey9',
              labelName: '车架号：',
              codeField: 'vin',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 12
            },
            {
              compKey: 'compKey10',
              labelName: '车辆配置：',
              codeField: 'carConfigCn',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 12
            },
            {
              compKey: 'compKey11',
              labelName: '附件：',
              codeField: 'credTypeCodePath',
              textField: 'credTypeCodePath',
              component: () => import('@/components/upload/up.vue'),
              dataToObj: { isUpload: false },
              type: 'dropdownList',
              isMust: true,
              span: 8
            }
          ]
        },
        {
          id: '004',
          title: '行驶证',
          data: [
            {
              compKey: 'compKey12',
              labelName: '车牌号：',
              codeField: 'carLicense',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 12
            },
            {
              compKey: 'compKey13',
              labelName: '车辆识别代码：',
              codeField: 'vin',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 12
            },
            {
              compKey: 'compKey14',
              labelName: '使用性质：',
              codeField: 'custType',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 12
            },
            {
              compKey: 'compKey15',
              labelName: '所属人：',
              codeField: 'signatoryname',
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 12
            },
            {
              compKey: 'compKey16',
              labelName: '附件：',
              codeField: 'credTypeCodePathTwo',
              textField: 'credTypeCodePathTwo',
              component: () => import('@/components/upload/up.vue'),
              dataToObj: { isUpload: false },
              type: 'dropdownList',
              isMust: true,
              span: 8
            }
          ]
        },
        {
          id: '006',
          title: '车辆照片',
          data: [
            {
              compKey: 'compKey22',
              labelName: '附件：',
              codeField: 'CredTypeCodePathThree',
              textField: 'CredTypeCodePathThree',
              component: () => import('@/components/upload/up.vue'),
              dataToObj: { isUpload: false },
              type: 'dropdownList',
              isMust: true,
              span: 8
            }
          ]
        }
      ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: {},
      initFormField: null
    }
  },
  watch: {
    curPopupsVisible(val) {
      val ? this.setColor() : ''
      this.$emit('update:popupsVisible', val)
    }

  },
  created() {
    this.tableComponents = this.coms.reduce((pre, cur) => [...pre, ...cur.data], [])
    this.genCodeFiled = this.genUtil(this.tableComponents)
    this.formField = this.genCodeFiled('codeField')
    Object.assign(this.formField, this.dynamicEditRowData)
  },
  mounted() {
    this.setColor()
  },
  methods: {

    setColor() {
      const nowSystemColor = this.$store.getters.nowTheme.backgroundColor
      this.styleObj.borderLeft = `5px solid ${nowSystemColor}`
    },

    rowAdd() {
      this.orderList.push(this.formField)
      this.formField = this.genCodeFiled('codeField')
    },
    genUtil: (array) => (attr) => array.reduce((p, c) => {
      p[c[attr]] = ''
      return p
    }, {}),
    closePopups() {
      this.formField = this.genCodeFiled('codeField')
    },
    reset() {
      this.formField = this.genCodeFiled('codeField')
    },
    save(saveObj, cb) {
      console.log(this.dynamicEditRowData)
      // validpopup  弹窗  validpage 页面
      // console.log(this.$refs)
      this.$utils.validataMoth(this, 'validpopup')
      if (this.valid) {
        if (this.popupsState === 'edit') {
          this.dynamicApiConfig.APIUrl = 've/testdriver/order/edit'
          this.apiConfig.APIUrl = 've/testdriver/order/edit'
        } else {
          this.dynamicApiConfig.APIUrl = 've/testdriver/order/add'
          this.apiConfig.APIUrl = 've/testdriver/order/add'
        }
        this.saveForm(saveObj, cb)
      } else {
        if (typeof cb === 'function') {
          cb.call(0)
        }
      }
    }
  }
}
</script>
<style scoped lang='css'>
  >>> div.fixHeight {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  h3 {
    padding-left: 10px;
    text-align: left;
    font-weight: 600;
  }

  h3 button.el-button {
    float: right;
    margin-right: 10px;
  }

  div.filter-container {
    margin-bottom: 35px;
  }

</style>
